<script setup>
import { ref, reactive } from 'vue'
import {
  getWorkPatternsAllAPI,
  getWorkPatternsPageAPI,
  getWorkSchedulingsPageAPI,
} from '@/services/work'
import PanelTable from './components/PanelTable.vue'
import PanelForm from './components/PanelForm.vue'

const isLoading = ref(false)
const dataSource = ref([])
const total = ref(0)
const params = reactive({
  page: 1,
  pageSize: 10,
})

// 获取数据
const getData = async (payload) => {
  // 合并参数
  Object.assign(params, payload)
  // 表格加载状态
  isLoading.value = true
  // 传递参数
  const res1 = await getWorkPatternsAllAPI()
  console.log(res1)
  const res2 = await getWorkPatternsPageAPI()
  console.log(res2)
  const res = await getWorkSchedulingsPageAPI()
  // 关闭表格加载状态
  isLoading.value = false
  // 保存列表数据，用于表格展示
  dataSource.value = res.data.items
  // 保存分页总数
  total.value = Number(res.data.counts)
}
</script>

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-card :bodyStyle="{ paddingBottom: 0 }">
      <!-- 表单部分 -->
      <PanelForm
        v-model:page="params.page"
        v-model:pageSize="params.pageSize"
        @init="getData"
        @finish="getData"
        @reset="getData"
      />
    </a-card>
    <a-card>
      <!-- 两个按钮 -->
      <a-button type="primary" style="margin-bottom: 20px; margin-right: 20px"> 排班设置 </a-button>
      <a-button type="primary" style="margin-bottom: 20px"> 绑定排班 </a-button>
      <!-- 表格部分 -->
      <PanelTable
        :dataSource="dataSource"
        :loading="isLoading"
        :total="total"
        v-model:page="params.page"
        v-model:pageSize="params.pageSize"
        @change="getData"
      />
    </a-card>
  </a-space>
</template>
